<template>
  <div class="admin-tutorial-list" :style="`height: ${documentHeight}px;`">
    <div class="tutorial-index_head">
      <div class="index_head-conter">
        <div class="inconter_head-box">
          <div class="inconter_head">
            <div class="index_head-ipt">
              <el-autocomplete popper-class="my-autocomplete" v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                <template slot-scope="{ item }">
                  <div class="name">{{ item.title }}</div>
                </template>
              </el-autocomplete>
            </div>
            <div class="index_head-icon">
              <i class="el-icon-search"></i>
            </div>
          </div>
          <div class="head-add_buts" @click="$router.push('/admin/tutorial/add')">添加</div>
        </div>
      </div>
    </div>
    <div class="tutorial-list_box">
      <listLeft @leftChang="leftChang"></listLeft>
      <listRight ref="list_right"></listRight>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  import listLeft from './widget/list-left.vue'
  import listRight from './widget/list-right.vue'
  export default {
    components: {
      listLeft,
      listRight
    },
    data () {
      return {
        documentHeight: 0,
        value: '',
        viewModel: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.documentHeight = h - 74
        var repones = await ala.diyHttpGet('Api/Tutorial/QueryList')
        this.viewModel = repones
      },
      querySearch (queryString, cb) {
        var restaurants = this.viewModel
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.title.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
        }
      },
      handleSelect (item) {
        this.value = item.title
        this.$router.push('/admin/tutorial/show?id=' + item.id)
      },
      leftChang (val) {
        this.$refs.list_right.init(val)
      }
    }
  }
</script>
<style lang="scss">
  @import "./var.scss";
</style>